<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="coordObj.js"></script>
    <script type="text/javascript" src="twitterscript.js"></script>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyChRMVAvQo4JIiBdgUJuK609zary5BZAE8&sensor=true">
    </script>
    <script type="text/javascript">
        var map;
        function initialize() {
            var stylesArray = [
  {
      featureType: "administrative",
      stylers: [
      { visibility: "off" }
    ]
  }, {
      featureType: "poi",
      stylers: [
      { visibility: "off" }
    ]
  }, {
      featureType: "road",
      stylers: [
      { visibility: "off" }
    ]
  }, {
      featureType: "transit",
      stylers: [
      { visibility: "off" }
    ]
  }, {
      featureType: "water",
      stylers: [
      { visibility: "on" },
      { invert_lightness: true }
    ]
  }, {
      featureType: "landscape",
      stylers: [
      { invert_lightness: true }
    ]
  }, {
      featureType: "water",
      elementType: "labels",
      stylers: [
      { visibility: "off" }
    ]
  }, {
}
]

            var stylesArray = new google.maps.StyledMapType(stylesArray, { name: "dark" });

            var mapOptions = {
                center: new google.maps.LatLng(45, -122),
                zoom: 3,
                mapTypeControl: false,
                streetViewControl: false,
                mapTypeControlOptions: {
                    mapTypeId: [google.maps.MapTypeId.ROADMAP, 'styles_Array']
                }
            };
            map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

            map.mapTypes.set('styles_Array', stylesArray);
            map.setMapTypeId('styles_Array');

            var image = 'tweet.png';
            var myLatLng = new google.maps.LatLng(-33.89, 151.27);
            var purpleMarker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image
            });

        }

        var numOnScreen = 50;  //number of icons on a screen at a given moment
        var markersArray = [];
        var counter = 0;
        var locations = []; 


        function createMarker() {
            //var myIcon = new google.maps.MarkerOptions;
            var image = 'tweet.png';
            var purpleMarker = new google.maps.Marker({
                position: locations[counter],
                map: map,
                icon: image,
                animation: google.maps.Animation.DROP

            });
            markersArray.push(purpleMarker);
            counter++;
            //if (counter > numOnScreen) {
            //        markersArray[counter - numOnScreen].setMap(null); 
            //}

        }

        function createLoc(lat, lng) {
            var loc = new google.maps.LatLng(lat, lng);
            location.push(loc);
        }

        function dropMarkers() {
            try {
                var lon, lat;
                for (var i = 0; i < 100; i++) {
                    var randLon = ((Math.random() * 675432) + 113 * i) % 340 + Math.random() * i;
                    var randLat = ((Math.random() * 874323) + 67 * i) % 160 + Math.random() * i;
                    lon = randLon > 160 ? randLon - 160 : 340 - randLon;
                    lat = randLat > 80 ? randLat - 80 : 160 - randLat;

                    if(Bob.geo[i].getLat() != 0){
                        var loc = new google.maps.LatLng(Bob.geo[i].getLat(), Bob.geo[i].getLon());
                        locations.push(loc);
                    }
                }
            }
            catch (e) {
                alert(e.message);
            }
        }

        function setup(){
            Bob = new tweetSearcher();
            Bob.setTerm("Obama");
            Bob.search();
        }

        function placeMarkers(){
            dropMarkers();
            delayInterval = (1200 / locations.length);
            for (i = 0; i < locations.length; i++) {
                setTimeout(function () {
                    createMarker();
                    }, i * delayInterval);
            }

       }
          
        
       
            
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:90%; height:90%"></div>
    <button onclick="createMarker( -40, 140)">
    place
    </button>
    <button onclick="placeMarkers()">
    markers
    </button>
    <input type = "button" onclick = "setup()" value = "setup"></input>
  </body>
</html>